import React from 'react';
import {
  Flex,
  List,
  // WhiteSpace,
  NavBar,
  Icon,
} from 'antd-mobile';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';

const Item = List.Item;
const Brief = Item.Brief;

class myOrderDetail extends React.Component {
  componentDidMount() {
    const parms = this.props.location.query ? this.props.location.query.id : '';
    if (parms === '') {
      this.props.dispatch(routerRedux.push('myorders'));
    } else {
      this.props.dispatch({
        type: 'myorderdetail/searchOrderById',
        payload: parms,
      });
    }
  }
  renderDetail = (orderDetail) => {
    if (Object.keys(orderDetail).length === 0) {
      return (
        <div>无数据</div>
      );
    } else if (orderDetail.details.length === 0) {
      return (
        <div>无详细数据</div>
      );
    } else {
      return orderDetail.details.map((rowData, index) => {
        return (
          <Flex
            key={`${rowData.id}${index}`}
            justify="between"
            style={{
              display: '-webkit-box',
              display: 'flex',
              padding: '15px 0',
              borderBottom: '1px solid #cceff5',
              marginBottom: 6,
            }}
          >
            <div style={{ lineHeight: 1 }}>
              <div style={{ marginBottom: '12px', fontWeight: 'bold', fontSize: '18px', color: '#FF6E27' }}>{rowData.internalType}</div>
              <div style={{ marginBottom: '18px' }}>名称：<span>{rowData.tradeName}</span></div>
              <div>单位：<span>{rowData.unitName}</span></div>
            </div>
            <div style={{ color: 'blue', lineHeight: 1, fontSize: 'x-large', display: 'flex', justifyContent: 'between', marginRight: 24 }}>
              <div>数量：<span>{rowData.amount}</span></div>
            </div>
          </Flex>
        );
      });
    }
  }
  // returnToMyOrder = () => {
  //   console.log(this.props);
  //   this.props.history.go(-1);
  //   });
  // }
  render() {
    const { orderDetail } = this.props.myorderdetail;
    return (
      <div>
        <NavBar
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={this.returnToMyOrder}
        >订单详情
        </NavBar>
        <List renderHeader={() => (orderDetail.isverify === '0' ? '未审核' : '已审核')} className="my-list">
          <Item multipleLine>
            订单号: {orderDetail.orderNo}
            <Brief>下单时间：{orderDetail.createTime}</Brief>
            <Brief>用户名称： {orderDetail.customerName}</Brief>
          </Item>
          <Item
            multipleLine
            onClick={() => {}}
            // platform="android"
          >
            {
              this.renderDetail(orderDetail)
          }
          </Item>
        </List>
      </div>
    );
  }
}

export default connect(({ myorderdetail }) => ({
  myorderdetail,
}))(myOrderDetail);
